<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{margin:0;padding:0;font-family:"微软雅黑";}
			.btn{
				display:inline-block;
				padding:6px 10px;
				border:1px solid #555;
				text-align:center;
				font-size:18px;
				color:#555;
				border-radius:5px;
				margin:50px 200px;
				cursor:pointer;
				position:relative;
			}
			img{
				width:200px;
			}
			.jdt{
				width:500px;
				height:10px;
				border-radius:10px;
			}
			.jdt-box{
				border:1px solid #999;
				position:relative;
			}
			.jdt-div{
				position:absolute;
				top:0;
				left:0;
				width:0;
				transition:width 0.5s;
				background:#22b5e5;
			}
		</style>
	</head>
	<body>
		<div class="btn">文件上传</div>
		<div class="btn">文件上传</div>
		<img src="" class="imgs">
		<div class="jdt jdt-box">
			<div class="jdt jdt-div"></div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	<script type="text/javascript" src="js/upload.js" ></script>
	<script>
		$(".btn").XuiFileUpload({
			url:"/upfile.php", //图片上传地址 type String required
			//文件类型
			//fileType:"", //文件类型 type 正则表达式 
			multiple:true,
			uploadStart:function(path){
				$(".imgs").attr("src" , path[0]);
			},
			upload:function(data){
				console.log(data);
				$(".jdt-div").width(data+"%")
			},
			uploadEnd:function(){},
			verification:function(error , name , index){ //验证失败处理函数
				alert("傻叉你的第"+index+"图片"+error+"错了")
			},
		})
	</script>
</html>
